<template>
  <div class="table-list">
    <a-card title="告警明细列表" :bordered="false" :headStyle="{ padding: '0 15px', border:0, marginTop: '15px'}" style="width:100%">
      <a-spin :spinning="loading">
        <a-table
          row-key=""
          size="small"
          :columns="alarmListColumns"
          :dataSource="alarmListData"
          :pagination="{ pageSize: 4 }"
        >
          <span slot="host" slot-scope="text">
            <ellipsis :length="15" tooltip>{{ text }}</ellipsis>
          </span>
          <span slot="details" slot-scope="text">
            <ellipsis :length="20" tooltip>{{ text }}</ellipsis>
          </span>
        </a-table>
      </a-spin>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
export default {
  name: 'DetailsList',
  components: {
    STable,
    Ellipsis
  },
  data () {
    return {
      alarmListColumns: [
        {
          dataIndex: 'name',
          title: '名称',
          scopedSlots: { customRender: 'name' }
        },
        {
          dataIndex: 'host',
          title: '主机',
          scopedSlots: { customRender: 'host' }
        },
        {
          dataIndex: 'ip',
          title: 'IP',
          scopedSlots: { customRender: 'ip' }
        },
        {
          dataIndex: 'details',
          title: '告警明细',
          scopedSlots: { customRender: 'details' }
        },
        {
          dataIndex: 'alarmTime',
          title: '告警时间',
          scopedSlots: { customRender: 'alarmTime' }
        },
        {
          dataIndex: 'status',
          title: '当前状态',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        }
      ],
      alarmListData: []
    }
  },
  created () {
    this.getAlarmListDetails()
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /***
     * 告警列表详情
     */
    getAlarmListDetails () {
      // 生产当天的开始日期
      const startDate = new Date(moment(new Date()).format('YYYY-MM-DD 00:00:00')).getTime()
      const endDate = new Date(moment(new Date()).format('YYYY-MM-DD 23:59:59')).getTime()
      for (let i = 0; i < 50; i += 1) {
        this.alarmListData.push({
          name: `spark_alarm ${i}`,
          host: `am2x0 ${i}`,
          ip: `10.11.21.${i}`,
          details: (i % 2 === 0) ? '监控数据告警' : '事件告警',
          alarmTime: moment(this.randomDate(startDate, endDate)).format('YYYY-MM-DD HH:mm:ss'),
          status: Math.floor(Math.random() * 3 + 1) // 随机生成1-3的数字       
        })
        this.loading = false
      }
      this.alarmListData.sort(function (a, b) {
        return Date.parse(a[ 'alarmTime' ]) - Date.parse(b[ 'alarmTime' ]) // 时间正序
      })
      this.alarmListData.forEach((item) => {
        item['alarmTime'] = moment(item['alarmTime']).format('HH:mm:ss')
      })
    },
    /**
     * 生成指定时间段的随机时间
     */
    randomDate (startDate, endDate) {
      const date = new Date(+startDate + Math.random() * (endDate - startDate))
      const hour = 0 + Math.random() * (23 - 0) | 0
      const minute = 0 + Math.random() * (59 - 0) | 0
      const second = 0 + Math.random() * (59 - 0) | 0
      date.setHours(hour)
      date.setMinutes(minute)
      date.setSeconds(second)
      return date
    }
  }
}
</script>
<style lang="less" scoped>
  .table-list{
    .ant-card{
      /deep/ .ant-card-body{
        padding: 0 10px;
        .ant-table-small{
          border: none;
        }
      }
    }
  }
</style>
